<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0px;
        }

        .btn {
            position: absolute;
            top: 130px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <button class="btn">点击动画</button>
    <script src="js/utils.js"></script>
    <script>
        let box = document.querySelector('.box');
        let btn = document.querySelector('.btn');

        function move(ele, obj, callback) {
            let timerLen = 0;
            for (let key in obj) {
                timerLen++
                let speed;
                /* 
                    let timer = 定时器
                    不能定义变量来接收定时器
                    如果使用变量的时候，点击的时候会创建一个函数地址
                    变量在函数中是属于局部作用域，
                    下一次点击的时候不能获取上一次点击时候创建的变量
                     clearInterval(timer)  清除的是当前timer的值，当前的timer = undefined

                     把定定时器 给到元素的属性中
                     元素是一个dom 也是一个对象，以地址的形式
                     当第一个点击的时候 给dom对象对象添加了 属性，下一次点击的时候是能获取 上一次给dom添加的属性
                */
                console.log(ele[key])
                clearInterval(ele[key])
                // 给这个对象添加一个 left 属性，属性值为 一个定时器的空间地址
                ele[key] = setInterval(() => {
                    var style = parseInt(getStyle(ele, key));
                    speed = Math.ceil((obj[key] - style) / 5);
                    style = style + speed;
                    if (style === obj[key]) {
                        clearInterval(ele[key]);
                        timerLen--;
                        if (timerLen === 0) {
                            // ele.style.background = 'blue';
                            // console.log(1);
                            // 短路运算 如果有callback 就执行callback，没有就不执行
                            callback && callback();
                        }
                    }
                    ele.style[key] = style + 'px';
                }, 60)
            }

        }

        btn.onclick = function () {
            move(box, { left: 1000 }, function () {
                // console.log('动画结束');
                box.style.background = 'blue'
            });
        }

        // move(box, 'width', 600);

    </script>
</body>

</html>